import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import router from '../router/index.js'
// vuex中存储数据
// 好处：vuex是响应式的
// 弊端：当当前页面刷新时，vuex中的数据会重新加载
// 解决弊端1：让数据持久化 本地存储：localStorage
// 解决弊端2：
// 第一步：下载配置文件并且导入vuex
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)
export default new Vuex.Store({
  // 第二步.配置为vuex的插件
  plugins: [createPersistedState()],
  state: {
    // token: localStorage.getItem('token')
    token: '',
    userinfo: {}
  },
  getters: {
  },
  mutations: {
    // mutations内部函数有两个参数第一个固定，第二个调用传参
    undateToken (state, payload) {
      state.token = payload
      // 本地存储
      // localStorage.setItem('token', payload)
    }
  },
  // 异步请求
  actions: {
    async initUserinfo (context) {
      // 发送axios获取最新信息
      try {
        const a = await axios({
          url: '/my/userinfo',
          method: 'get',
          headers: { Authorization: context.state.token }
        })
        // console.log(context.state.userinfo)
        // console.log(a.data.data)
        context.state.userinfo = a.data.data
      } catch (abc) {
        // console.log(abc.response.data.code)
        if (abc.response.data.code === 1) {
          console.log(this)
          router.push('/login')
        }
      }
    }
  },
  modules: {
  }
})
